<template>
  <el-dropdown trigger="click" :teleported="false">
    <div class="more-button">
      <i :class="'iconlayout iconly-xiala'"></i>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="refresh">
          <el-icon><Refresh /></el-icon>刷新
        </el-dropdown-item>
        <el-dropdown-item @click="maximize">
          <el-icon><FullScreen /></el-icon>最大化
        </el-dropdown-item>
        <el-dropdown-item divided @click="closeCurrentTab">
          <el-icon><Remove /></el-icon>关闭当前
        </el-dropdown-item>
        <el-dropdown-item @click="store.dispatch('layouts/closeTabsOnSide', { path: route.fullPath, type: 'left' })">
          <el-icon><DArrowLeft /></el-icon>关闭左侧
        </el-dropdown-item>
        <el-dropdown-item @click="store.dispatch('layouts/closeTabsOnSide', { path: route.fullPath, type: 'right' })">
          <el-icon><DArrowRight /></el-icon>关闭右侧
        </el-dropdown-item>
        <el-dropdown-item divided @click="store.dispatch('layouts/closeMultipleTab')">
          <el-icon><CircleClose /></el-icon>关闭其它
        </el-dropdown-item>
        <el-dropdown-item @click="closeAllTab">
          <el-icon><FolderDelete /></el-icon>关闭所有
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { inject, nextTick, computed } from "vue";
// import { HOME_URL } from "@/config";
// import { useTabsStore } from "@/stores/modules/tabs";
// import { useGlobalStore } from "@/stores/modules/global";
// import { useKeepAliveStore } from "@/stores/modules/keepAlive";
import { useRoute, useRouter } from "vue-router";
import { useStore } from 'vuex'
const store = useStore()

const HOME_URL = "/";
const route = useRoute();
const router = useRouter();
// const tabStore = useTabsStore();
// const globalStore = useGlobalStore();
// const keepAliveStore = useKeepAliveStore();

// refresh current page
const refreshCurrentPage: Function = inject("refresh") as Function;
const refresh = () => {
  setTimeout(() => {
    // route.meta.isKeepAlive && keepAliveStore.removeKeepAliveName(route.fullPath as string);
    refreshCurrentPage(false);
    nextTick(() => {
      // route.meta.isKeepAlive && keepAliveStore.addKeepAliveName(route.fullPath as string);
      refreshCurrentPage(true);
    });
  }, 0);
};

// maximize current page
const maximize = () => {
  store.dispatch('layouts/setGlobalState', { "maximize": true })
  // globalStore.setGlobalState("maximize", true);
};

// Close Current
const closeCurrentTab = () => {
  if (route.meta.isAffix) return;
  store.dispatch('layouts/removeTabs', { "tabPath": route.fullPath })
  // tabStore.removeTabs(route.fullPath);
};

// Close All
const closeAllTab = () => {
  // tabStore.closeMultipleTab();
  store.dispatch('layouts/closeMultipleTab', { "tabsMenuValue": '' })
  router.push(HOME_URL);
};
</script>

<style scoped lang="scss">
@use "../index.scss";
</style>
